<template>
  <ele-page>
    <!-- 搜索表单 -->
    <search @search="reload" :where="defaultWhere" />
    <ele-card :body-style="{ paddingTop: '8px' }">
      <!-- 表格 -->
      <ele-pro-table
        ref="tableRef"
        row-key="userId"
        :columns="columns"
        :datasource="datasource"
        :show-overflow-tooltip="true"
        v-model:selections="selections"
        highlight-current-row
        border
        stripe
        :where="defaultWhere"
        :loadOnCreated="false"
      >
        <template #toolbar="{}">
          <span class="mr8 ml8">总申请：{{ totalAmount }}元</span>
          <span>总发放：{{ totalAmountActual }}元</span>
        </template>
        <template #realname="{ row }">
          <span
            :class="genderClass(row.gender)"
            @click="showStudentDetail(row)"
          >
            {{ row.realname }}
          </span>
        </template>
        <template #status="{ row }">
          <el-tag v-if="row.id > 0" :type="statusType(row.status)">
            {{ statusText(row.status) }}
          </el-tag>
          <span v-else>{{ statusText(row.status) }}</span>
        </template>
        <template #times="{ row }">
          <span v-if="row.id > 0" class="pointer" @click="setUserId(row)">
            {{ row.times }}次
          </span>
        </template>
        <template #bill="{ row }">
          <span v-if="row.id > 0" class="pointer" @click="showBill(row)"
            >{{ row.bill_amount }}元</span
          >
        </template>

        <template #account="{ row }">
          {{ row.pay_account_name }} - {{ row.pay_account_info }} -
          {{ row.pay_account }}
        </template>

        <template #action="{ row }">
          <el-button-group>
            <el-button
              v-if="row.id > 0"
              type="primary"
              size="small"
              @click="openImages(row)"
              >查看图片</el-button
            >
          </el-button-group>
        </template>
      </ele-pro-table>
    </ele-card>
    <!-- 回访 -->
    <judge v-model="showJudge" :job="current" type="judge" @done="reload" />
    <!-- 学生详情 -->
    <detail v-model="showDetail" :student-id="currentId" @done="reload" />
    <images v-model="showImages" :images-list="imagesList" />
  </ele-page>
</template>

<script setup>
  import { ref, computed } from 'vue';
  import Search from './search.vue';
  import Judge from '@/views/company/apply/components/pay.vue';
  import Detail from '@/views/student/components/detail.vue';
  import Images from '@/components/ImagesList/index.vue';
  import { pageAdvanceWageList } from '@/api/money';

  const props = defineProps({
    defaultWhere: Object
  });
  /** 表格实例 */
  const tableRef = ref(null);

  const genderClass = (value) => {
    const ut = {
      0: 'pointer red',
      1: 'pointer blue'
    };
    return ut[value];
  };

  const statusText = (value) => {
    const cs = {
      '-1': '总计',
      0: '本页小计',
      100: '待审核',
      200: '其他',
      300: '其他',
      400: '待打款',
      500: '已完成',
      600: '未通过',
      601: '其他'
    };
    return cs[value];
  };
  const statusType = (state) => {
    const stateMap = {
      100: 'danger',
      500: 'success',
      601: 'info',
      200: 'info',
      300: 'info',
      400: 'warning',
      600: 'info'
    };
    return stateMap[state];
  };

  /** 表格列配置 */
  const columns = computed(() => {
    const cols = [
      {
        prop: 'tenant',
        label: '所属公司',
        width: 100
      },
      {
        slot: 'status',
        label: '状态',
        align: 'center',
        width: 85
      },
      {
        label: '预支会员',
        width: 90,
        align: 'center',
        slot: 'realname'
      },
      {
        prop: 'tel',
        label: '电话',
        width: 120
      },
      {
        width: 100,
        prop: 'amount',
        align: 'center',
        label: '申请金额'
      },
      {
        prop: 'amount_actual',
        label: '实际发放',
        width: 100,
        align: 'center'
      },
      {
        prop: 'create_time',
        label: '申请时间',
        width: 140,
        align: 'center'
      },
      {
        prop: 'judge_user',
        label: '审核人',
        width: 95
      },
      {
        prop: 'judge_time',
        label: '审核时间',
        width: 110
      },
      {
        slot: 'times',
        label: '预支次数',
        align: 'center',
        width: 90
      },
      {
        slot: 'bill',
        label: '未还账单',
        width: 100,
        align: 'center'
      },
      {
        prop: 'note',
        label: '描述'
      }
    ];

    if (status.value > 399) {
      cols.push({
        prop: 'judge_user',
        label: '审核人',
        width: 95
      });
      cols.push({
        prop: 'judge_time',
        label: '审核时间',
        width: 110
      });
    }

    return cols;
  });

  const status = ref(100);

  /** 表格选中数据 */
  const selections = ref([]);

  /** 当前编辑数据 */
  const current = ref(null);

  /** 当前编辑数据 */
  const currentId = ref(null);

  /** 是否显示编辑弹窗 */
  const showJudge = ref(false);

  /** 是否显示编辑弹窗 */
  const showDetail = ref(false);

  /** 表格数据源 */
  const datasource = async ({ page, where, orders, limit }) => {
    const result = await pageAdvanceWageList({
      ...where,
      ...orders,
      page,
      limit,
      status: 500
    });
    totalAmount.value = result.totalAmount;
    totalAmountActual.value = result.totalAmountActual;
    return result;
  };
  const totalAmount = ref(0);
  const totalAmountActual = ref(0);

  /** 搜索 */
  const reload = (where) => {
    console.log(where);
    status.value = where ? where.status : 100;
    selections.value = [];
    tableRef.value?.reload?.({ page: 1, where });
  };

  /** 打开编辑弹窗 */
  const showStudentDetail = (row) => {
    if (row.user_id > 0) {
      currentId.value = row.user_id ?? 0;
      showDetail.value = true;
    }
  };

  /** 查看图片 */
  const imagesList = ref([]);
  const showImages = ref(false);
  const openImages = (row) => {
    imagesList.value = row.images ?? [];
    showImages.value = true;
  };
</script>
